<template>
    <div class="container">
        <span class="Bigtitle">
            <i class="fa fa-circle" aria-hidden="true" style="font-size:24px"></i>
            待办事项
        </span>
        <div class="things">
            <div class="item">
                <span class="small-title">共有30件待处理的订单</span>
                <br>
                <i class="fa fa-tasks" aria-hidden="true" style="font-size:40px"></i>
                <span class="content">
                    商家产品重要的一步,就是为你的产品穿上了花的外套(文案),好的产品描述还能促进你和顾客之间的关系,不仅
                    可以提高销售量,还能提高复购率,当我们一味介绍产品如何好的时候，顾客是怀疑的态度，但关于店铺环境、服务和优惠政策，
                    顾客是可以最先感知的。所以我们需要多方面体现产品价值。大家熟知的海底捞，凭服务和环境，受到大家一致好评。
                </span>
                <el-button class="dealwith" type="warning">立即处理</el-button>
            </div>
            <div class="item">
                <span class="small-title">共有25条待换货的订单</span>
                <br>
                <i class="fa fa-exchange" aria-hidden="true" style="font-size:40px"></i>
                <span class="content">
                    商家产品重要的一步,就是为你的产品穿上了花的外套(文案),好的产品描述还能促进你和顾客之间的关系,不仅
                    可以提高销售量,还能提高复购率,当我们一味介绍产品如何好的时候，顾客是怀疑的态度，但关于店铺环境、服务和优惠政策，
                    顾客是可以最先感知的。所以我们需要多方面体现产品价值。大家熟知的海底捞，凭服务和环境，受到大家一致好评。
                </span>
                <el-button class="dealwith" type="warning">立即处理</el-button>
            </div>
        </div>

    </div>
</template>

<script>
module.exports = {

}
</script>

<style scoped>
.dealwith {
    position: relative;
    left: 74%;
    top: -20px;
    border-radius: 24%;
}

.container {

    /* border: 1px solid red; */
    width: 50%;
    height: 30%;
    left: 19%;
    top: 37%;
    position: absolute;
    background-color: whitesmoke;
    border-radius: 10%;
}

.container .Bigtitle {
    font-family: serif;
    left: 20px;
    position: relative;
    top: 10px;
}

.container .things {
    margin: 20px auto;
    /* border: 1px solid black; */
    position: relative;
    width: 95%;
    height: 82%;

}

.container .things .item {
    /* border: 1px solid pink; */
    position: relative;
    width: 100%;
    height: 45%;
    margin: 5px auto;
}

.container .things .item .small-title {
    position: relative;
    left: 10%;
    background-color: darkgray;
}

.container .things .item .content {
    position: absolute;
    top: 30px;
    text-align: justify;
    font-size: 14px;
    width: 70%;
    /* border: 1px solid palegreen; */
    display: inline-block;

}

.container .things .item i {
    position: relative;
    margin: 20px;
    top: -20px
}
</style>
